import React,{memo,useState,useRef,useEffect} from 'react'
import "../../assets/Layout/im.scss"
import { Input, Form, Popover,Upload,Button ,message,Tag,Avatar} from 'antd'
import EmojiItem from '../konjian/zhuye/mode/emoji'
import { useLocation } from 'react-router-dom'
import { CaretLeftFilled,CaretRightFilled,RightOutlined,SearchOutlined} from '@ant-design/icons';
import type { UploadProps } from 'antd';
import ImList from './mode/imList'
import UserBox from '../mode/userBox'
const { TextArea } = Input;

const props: UploadProps = {
  name: 'file',
  action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
  headers: {
    authorization: 'authorization-text',
  },
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};
/***
 * 消息列表
 * @constructor
 */
function ImInfo(){
  let location = useLocation();
  const [text,setText] = useState("")
  const [open, setOpen] = useState(false)
  const [open2, setOpen2] = useState(false)
  const scrollableDivRef = useRef(null);
  const [tepy,setTepy] = useState(false)
  const  [column,setColumn] = useState(false)
  useEffect(()=>{
    var type1 = location.state.type
    if(type1 === "gr"){
      let w =  document.documentElement.style.getPropertyValue('--w180')
      let winW = window.innerWidth;
      let winH = window.innerHeight;
      if(w === "180px"){
        window.electron.ipcRenderer.send("groupChatWindow",{width:(winW - 180),isShow:false,height:winH})
      }
      setTepy(false);
    }
    if(type1 === "ql"){
      let w =  document.documentElement.style.getPropertyValue('--w180')
      let winW = window.innerWidth;
      let winH = window.innerHeight;
      if(w === "180px"){
        window.electron.ipcRenderer.send("groupChatWindow",{width:(winW + 180),isShow:false,height:winH})
      }
      setTepy(true);
    }

  })


  const onEnter = (e)=>{
    if(e.keyCode === 13){
      console.log(text)
      setText("")
      e.preventDefault();
      if(scrollableDivRef.current){
        scrollableDivRef.current.scrollTop = scrollableDivRef.current.scrollHeight;
      }

      return
    }
  }

  /***
   * 显示表情栏选择器
   */
  const content = (
    <div className="emoji-item">
      <EmojiItem onEmojiSelect={(e)=>onEmojiSelect(e)}></EmojiItem>
    </div>
  );
  const  onEmojiSelect = (e)=>{
    let name = text + e.native
    setText(name);
    console.log(e)
  }
  const handleOpenChange = (newOpen: boolean,type) => {
    if(type === 'open'){
      setOpen(newOpen)
    }
    if(type === 'open2'){
      setOpen2(newOpen)
    }

  };

  const onChangeFun = (e)=>{
    setText(e.target.value)
  }
  const contentUser = (
    <UserBox></UserBox>
  );
  const onOpenWIn = (e)=>{
    let url = '/test?id=11'
     window.electron.ipcRenderer.send("open-window",url)
  }
  const  listDiv = (<div className="toole-list">
    <Upload {...props}>
      <Button className="im-button" type="link" icon={<i className="iconfont mt-xiangce" />}>
        上传图片</Button>
      <Button className="im-button"  type="link" icon={<i className="iconfont mt-a-03-shipinguanli" />}>
        上传视频</Button>
    </Upload>
  </div>);
  const  jbClick = ()=>{
    let w =  document.documentElement.style.getPropertyValue('--w180')
    let winW = window.innerWidth;
    let winH = window.innerHeight;
    if(w == "0px" || w == ""){
      setColumn(true)
      document.documentElement.style.setProperty('--w180', '180px');
      window.electron.ipcRenderer.send("groupChatWindow",{width:(winW + 180),isShow:true,height:winH})
    }else{
      setColumn(false)
      document.documentElement.style.setProperty('--w180', '0px');
      window.electron.ipcRenderer.send("groupChatWindow",{width:(winW - 180),isShow:false,height:winH})
    }



  }
  const  grIm = (  <> <div className="im-box" ref={scrollableDivRef}>
    <ImList/>
  </div>
  <div className="im-box-b">
    <div className="img-tool-box">
      <div className="im-l">
        <Popover placement="top"
                 open={open}
                 onOpenChange={(e)=>handleOpenChange(e,'open')}
                 content={content}
                 trigger="click">
          <i onClick={()=>setOpen(true)} className="iconfont mt-xiaolian "></i>
        </Popover>

        <Popover placement="top"
                 open={open2}
                 onOpenChange={(e)=>handleOpenChange(e,'open2')}
                 content={listDiv}
                 trigger="click">
          <i onClick={()=>setOpen2(true)} className="iconfont mt-xiangce "></i>
        </Popover>
        <Upload {...props}>
          <i className="iconfont mt-folder-close"></i>
        </Upload>
      </div>
      <div className="im-r">
        <i onClick={(e)=>onOpenWIn(e)} className="iconfont mt-shizhong"></i>
      </div>

    </div>
    <div className="im-inupt-box">

      <TextArea
        onKeyDown={onEnter}
        classNames="text-area"
        placeholder="请输入内容"
        value={text}
        onChange={(e)=>onChangeFun(e)}
        autoSize={{ minRows: 5, maxRows: 5 }}
      />

    </div>

  </div></>)

  const qlIm = ( <div className="im-main">
    <div className="im-main-l">
      <div onClick={()=>jbClick()}  className="im-jb-box">
        <div   className="im-jb-icon">
          {
            column?  <CaretRightFilled />:<CaretLeftFilled />
          }
      </div>
      </div>
      <div className="im-box" ref={scrollableDivRef}>
        <ImList/>
      </div>
      <div className="im-box-b">
        <div className="img-tool-box">
          <div className="im-l">
            <Popover placement="top"
                     open={open}
                     onOpenChange={(e)=>handleOpenChange(e,'open')}
                     content={content}
                     trigger="click">
              <i onClick={()=>setOpen(true)} className="iconfont mt-xiaolian "></i>
            </Popover>

            <Popover placement="top"
                     open={open2}
                     onOpenChange={(e)=>handleOpenChange(e,'open2')}
                     content={listDiv}
                     trigger="click">
              <i onClick={()=>setOpen2(true)} className="iconfont mt-xiangce "></i>
            </Popover>
            <Upload {...props}>
              <i className="iconfont mt-folder-close"></i>
            </Upload>
          </div>
          <div className="im-r">
            <i onClick={(e)=>onOpenWIn(e)} className="iconfont mt-shizhong"></i>
          </div>

        </div>
        <div className="im-inupt-box">
          <TextArea
            onKeyDown={onEnter}
            classNames="text-area"
            placeholder="请输入内容"
            value={text}
            onChange={(e)=>onChangeFun(e)}
            autoSize={{ minRows: 5, maxRows: 5 }}
          />

        </div>
      </div>

    </div>
    <div className="im-main-r">
     <div className="im-rbox-main">
       <div className="im-text-box">
         <div>群公告</div>
         <div><RightOutlined /></div>
       </div>
       <div className="group-content">
         这个群主什么都被说～～～</div>
     </div>
     <div className="im-user-list">
       <div className="im-user-head">
         <div>群成员（0）</div>
         <div><SearchOutlined /></div>
       </div>
       <div className="im-list">

         <Popover placement="left" arrow={false}   trigger="click"
                  content={contentUser} >
           <div className="im-user-item">
             <div className="user-a">
               <Avatar size={28}
                       src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
             </div>
             <div className="user-c">用户名称</div>
             <div className="user-r">  <Tag color="volcano">群主</Tag></div>
           </div>
         </Popover>

         <Popover placement="left" arrow={false}   trigger="click"
                  content={contentUser} >
           <div className="im-user-item">
             <div className="user-a">
               <Avatar size={28}
                       src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
             </div>
             <div className="user-c">用户名称</div>
             <div className="user-r">  <Tag color="volcano">群主</Tag></div>
           </div>
         </Popover>

         <Popover placement="left" arrow={false}   trigger="click"
                  content={contentUser} >
           <div className="im-user-item">
             <div className="user-a">
               <Avatar size={28}
                       src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
             </div>
             <div className="user-c">用户名称</div>
             <div className="user-r">  <Tag color="volcano">群主</Tag></div>
           </div>
         </Popover>

         <Popover placement="left" arrow={false}   trigger="click"
                  content={contentUser} >
           <div className="im-user-item">
             <div className="user-a">
               <Avatar size={28}
                       src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
             </div>
             <div className="user-c">用户名称</div>
             <div className="user-r">  <Tag color="volcano">群主</Tag></div>
           </div>
         </Popover>

         <Popover placement="left" arrow={false}   trigger="click"
                  content={contentUser} >
           <div className="im-user-item">
             <div className="user-a">
               <Avatar size={28}
                       src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
             </div>
             <div className="user-c">用户名称</div>
             <div className="user-r">  <Tag color="volcano">群主</Tag></div>
           </div>
         </Popover>

         <Popover placement="left" arrow={false}   trigger="click"
                  content={contentUser} >
           <div className="im-user-item">
             <div className="user-a">
               <Avatar size={28}
                       src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
             </div>
             <div className="user-c">用户名称</div>
             <div className="user-r">  <Tag color="volcano">群主</Tag></div>
           </div>
         </Popover>

         <Popover placement="left" arrow={false}   trigger="click"
                  content={contentUser} >
           <div className="im-user-item">
             <div className="user-a">
               <Avatar size={28}
                       src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
             </div>
             <div className="user-c">用户名称</div>
             <div className="user-r">  <Tag color="volcano">群主</Tag></div>
           </div>
         </Popover>

         <Popover placement="left" arrow={false}   trigger="click"
                  content={contentUser} >
           <div className="im-user-item">
             <div className="user-a">
               <Avatar size={28}
                       src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
             </div>
             <div className="user-c">用户名称</div>
             <div className="user-r">  <Tag color="volcano">群主</Tag></div>
           </div>
         </Popover>



         <div className="im-user-item">
           <div className="user-a">
             <Avatar size={28}
                     src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
           </div>
           <div className="user-c">用户名称用户名称</div>
           <div className="user-r">  <Tag color="blue">管理员</Tag></div>
         </div>
       </div>

     </div>




    </div>

  </div>)


  return <>
    {
      tepy?qlIm:grIm
    }


  </>
}

export default memo(ImInfo);

